<template>
  <!-- vuex的用法 -->
  <ul>
    <li v-for="(todo,index) in todos" :key="index">
      <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
    </li>
    <li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
    <div @click="setToken">
      提交token
    </div>
    <!-- <div>ddd  {{ token }}</div> -->
  </ul>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import Cookies from 'js-cookie'
export default {
  computed: {
    todos () { return this.$store.state.todos.list }, // state数据获取方式一
    ...mapState('token', {
      token: 'token' // state数据获取方式二
    })
  },
  mounted () {
    // Cookies.set('name', 'value111111111')
  },
  methods: {
    addTodo (e) {
      this.$store.commit('todos/add', e.target.value)
      e.target.value = ''
    },
    setToken () {
      // this.$store.commit('token/addToken', '我是同步提交的token')
      this.$store.dispatch('token/SET_SETTING_ITEM', '异步提交的token')
    },
    ...mapMutations({
      toggle: 'todos/toggle'
    })
  }

}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>
